<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="multipart/form-data;charset=utf-8" />
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet">
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet">
<!--①注意head是否有样式冲突，引入富文本框需要的css文件-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/simditor/simditor.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.min862f.css?v=4.1.0}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-tbHuodong-add" enctype="multipart/form-data" th:action="@{add}" method="post">
			<div class="form-group">	
				<label class="col-sm-3 control-label">活动昵称：</label>
				<div class="col-sm-8">
					<input id="hdtitle" name="hdtitle" class="form-control" type="text" placeholder="请填写活动昵称">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">活动类别：</label>
				<div class="col-sm-8">
					<input id="hdtype" name="hdtype" class="form-control" type="text" placeholder="请填写活动类别">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">活动地点：</label>
				<div class="col-sm-8">
					<input id="hdloc" name="hdloc" class="form-control" type="text" placeholder="请填写活动地点">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">活动人数：</label>
				<div class="col-sm-8">
					<input id="hdnum" name="hdnum" class="form-control" type="text" placeholder="请填写活动人数">
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动开始时间：</label>
                <div class="col-sm-8">
                    <input class="form-control laydate-icon  layer-date"
                           name="hdbtime"
                           id="hdbtime"
                           value=""
                           readonly="readonly"
                           style="width:120px;"
                           placeholder="开始时间"
                           title="活动开始时间"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动结束日期：</label>
                <div class="col-sm-8">
                    <input class="form-control laydate-icon  layer-date"
                           name="hdetime"
                           id="hdetime"
                           value=""
                           readonly="readonly"
                           style="width:120px;"
                           placeholder="结束日期"
                           title="活动结束日期"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动图片：</label>
                <div class="col-sm-8">
                    <input id="files" name="files" class="form-control" type="file" multiple>
                </div>
            </div>
            <input class="form-control" id="filesnum"  name="filesnum"  type="hidden"  readonly="true">
            <!--因为文件上传功能隐藏的bug，故这文件时长、大小两个字段不能删掉-->
            <input id="flenth" name="flenth" class="form-control" type="hidden" readonly value="">
            <input id="fsize" name="fsize" class="form-control" type="hidden"  readonly value="">

			<!--<div class="form-group">	-->
				<!--<label class="col-sm-3 control-label">活动图片：</label>-->
				<!--<div class="col-sm-8">-->
					<!--<input id="hdpic" name="hdpic" class="form-control" type="text">-->
				<!--</div>-->
			<!--</div>-->

            <div class="form-group">
                <label class="col-sm-3 control-label">活动简介：</label>
                <div class="col-sm-8">
                    <textarea id="hdsum" name="hdsum"  autofocus></textarea>
                    <!--②使用textare去作为富文本输入框-->
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">活动添加日期：</label>
                <div class="col-sm-8">
                    <input class="form-control laydate-icon  layer-date"
                           name="hdadddate"
                           id="hdadddate"
                           value=""
                           readonly="readonly"
                           style="width:120px;"
                           placeholder="活动添加日期"
                           title="活动添加日期"/>
                </div>
            </div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">添加人编号：</label>
				<div class="col-sm-8">
					<input id="uid" name="uid" class="form-control" type="text" placeholder="请填写添加人编号">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">发布人姓名：</label>
				<div class="col-sm-8">
					<input id="uname" name="uname" class="form-control" type="text" placeholder="请填写发布人姓名">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户所属地区村社区 aid：</label>
				<div class="col-sm-8">
                    <input  class="form-control" type="text" id="aid" name="aid" onclick="selectAidTree()" readonly="true" placeholder="点击选择区域">
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否有效：</label>
                <div class="col-sm-8">
                    <select class="chosen-select form-control" id="remark" name="remark"  type="text" placeholder="请选择是否有效">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
            </div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "village/tbHuodong"
        var Upload=document.getElementById("files");
        // var upload2=document.getElementsById("files2");
        //var formData=new FormData(); //通过FormData对象可以组装一组用 [XMLHttpRequest]发送请求的键/值对,它可以更灵活方便的发送表单数据。
        Upload.onchange=function(){  //onchange在你选择完文件时触发
            var fileList=Upload.files ; //通过input的files属性获得fileList
            // var fileList2=upload2.files;
            var filesnum = fileList.length;//获得文件数量
            $("#filesnum").val(filesnum);//用于传至后台进行处理

            for(let i=0;i<filesnum;i++)
            {
                var file=fileList[i];

                //formData.append("file"+i,file);  //key:"file"+i,value:file,然后就可以把formData post到后台了
                console.log(file.name+file.lastModifiedDate);

            }
        }


        // 检测是否选择文件，如果选择，返回文件对象;如果没选择，返回false
        function checkFile(){
            // 获取文件对象(该对象的类型是[object FileList]，其下有个length属性)
            var fileList = $('#files')[0].files;

            // 如果文件对象的length属性为0，就是没文件
            if (fileList.length === 0) {
                console.log('没选择文件');
                return false;
            };
            return fileList[0];
        };
        function aa(){
            let  file = checkFile();
            let size = file.size;
            // console.log("文件大小",size);
            //获取录音时长
            let url = URL.createObjectURL(file);
            let audioElement = new Audio(url);
            let duration = audioElement.duration/60; //音频长度 视频不行
            $("#flenth").attr("value",duration);
            $("#fsize").attr("value",size);
            /*console.log(duration,size)*/
        };

        function submitHandler() {

            if (!checkFile()) {

                alert('请先选择文件');
                return false;
            }
            else {

                aa();
                $.modal.loading("正在上传中，请稍后...");
                /** 验证文件是否导入成功  */
                $("#form-tbHuodong-add").ajaxSubmit(function (data) {
                    $.operate.successCallback({"code": data.code, "msg": data.msg});
                });
//			$.modal.close();
                return false;
            }
        }
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return ;
            }
        }

		$("#form-tbHuodong-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});
		
        // function submitHandler() {
	    //     if ($.validate.form()) {
	    //         $.operate.save(prefix + "/add", $('#form-tbHuodong-add').serialize());
	    //     }
	    // }
	</script>
    <script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>
    <script th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script>
    <!--时间插件-->
    <script>
        laydate({
            elem:"#hdbtime",
            event:"focus"
        });
        laydate({
            elem:"#hdetime",
            event:"focus"
        });
        laydate({
            elem:"#hdadddate",
            event:"focus"
        });
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem:"#village",
                type: 'time',
            });
        });

        /*用户管理-新增-选择用户所属区域树*/
        function selectAidTree() {
            var url = "/broad/organization/selectAidTree";
            var options = {
                title: '选择区域',
                width: "380",
                url: "/broad/organization/selectAidTree",
                callBack: doSubmitAid
            };
            $.modal.openOptions(options);
        }
        /*该模块是选择用户所属区域树的提交功能模块，body.find()方法中该使用框架固定的treeId、treeName*/
        function doSubmitAid(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#aid").val(body.find('#treeId').val());
                /*console.log(body.find('#treeId').val());
                console.log(body.find('#treeName').val());*/
                layer.close(index);
            }
        }
    </script>
    <!--③引入富文本框需要的js文件-->
    <script th:src="@{/js/plugins/simditor/module.js}"></script>
    <script th:src="@{/js/plugins/simditor/uploader.js}"></script>
    <script th:src="@{/js/plugins/simditor/hotkeys.js}"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script th:src="@{/js/plugins/simditor/simditor.js}"></script>
    <!--④定义富文本框-->
    <script>
        var editor = new Simditor({toolbar: ['title', 'bold', 'underline', 'color', '|', 'ol', 'ul', 'table'], textarea: '#hdsum',});
    </script>
    <script>
        $(document).ready(function(){Dropzone.options.myAwesomeDropzone={autoProcessQueue:false,uploadMultiple:true,parallelUploads:100,maxFiles:100,init:function(){var myDropzone=this;this.element.querySelector("button[type=submit]").addEventListener("click",function(e){e.preventDefault();e.stopPropagation();myDropzone.processQueue()});this.on("sendingmultiple",function(){});this.on("successmultiple",function(files,response){});this.on("errormultiple",function(files,response){})}}});
    </script>
    <script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
    <script th:src="@{/js/jquery-form.js}"></script>
</body>
</html>
